import React from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './emailVerification.module.css';

export default function EmailVerification() {
  const navigate = useNavigate();
  const email = "johndoe1234@gmail.com"; // 这里应该从路由状态或全局状态获取邮箱

  const handleOpenEmail = () => {
    // 这里可以添加打开邮件客户端的逻辑
    window.location.href = `mailto:${email}`;
  };

  return (
    <div className={styles.container}>
      <div className={styles.leftSection}>
        <div className={styles.logo}>
          <img src="/koto-logo.png" alt="Koto" />
          <h1>Koto</h1>
        </div>
        <h2>以最佳的方式管理您的文件存储</h2>
        <p>太棒了，我们为您创建了存储所有文档的完美场所。</p>
        <div className={styles.illustration}>
          <img src="/folder-illustration.png" alt="文件夹插图" />
        </div>
      </div>
      
      <div className={styles.rightSection}>
        <div className={styles.verificationForm}>
          <h2>检查您的电子邮件</h2>
          
          <div className={styles.emailIcon}>
            <img src="/email-icon.png" alt="邮件图标" />
          </div>
          
          <p className={styles.description}>
            我们已将重置密码的链接发送电子邮件至{email}以验证您的账户。
          </p>
          
          <button onClick={handleOpenEmail} className={styles.emailButton}>
            打开我的电子邮件
          </button>
          
          <div className={styles.divider}>
            <span>或</span>
          </div>
          
          <div className={styles.socialLogin}>
            <button className={styles.wechatButton}>
              <img src="/wechat-icon.png" alt="微信" />
            </button>
          </div>
          
          <div className={styles.backToLogin}>
            <span>还没有账户？</span>
            <a href="/register">立即注册</a>
          </div>
        </div>
      </div>
    </div>
  );
}
